<template>
  <div class="wu-search-form">
    <el-form :model="searchForm" ref="searchFormRef" :inline="true">
      <template v-for="item in formItemList">
        <!-- 下拉框 -->
        <el-form-item
          v-if="item.type === 'select'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <el-select
            v-model="searchForm[item.prop]"
            :placeholder="item.placeholder || '请选择'"
          >
            <el-option
              v-for="dict in item.dictList"
              :key="dict[item.dictValue || 'value']"
              :label="dict[item.dictLabel || 'label']"
              :value="dict[item.dictValue || 'value']"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 单日期 -->
        <el-form-item
          v-if="item.type === 'date'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <el-date-picker
            v-model="searchForm[item.prop]"
            :placeholder="item.placeholder || '请选择'"
            :type="item.dateType || 'date'"
            :format="item.format || undefined"
            :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
            :default-time="item.defaultTime || defaultTime"
          />
        </el-form-item>
        <!-- 双日期 -->
        <el-form-item
          v-if="item.type === 'daterange'"
          :key="item.endProp"
          :label="item.label"
          :prop="item.endProp"
        >
          <wu-daterange-picker
            ref="daterangeRef"
            :item="item"
            v-model:start-val="searchForm[item.startProp || defaultStartKey]"
            v-model:end-val="searchForm[item.endProp || defaultEndKey]"
          ></wu-daterange-picker>
        </el-form-item>
        <!-- 输入框 -->
        <el-form-item
          v-if="item.type === 'input'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <el-input
            v-model="searchForm[item.prop]"
            :placeholder="item.placeholder || '请选择'"
          />
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { formItem } from '@/types/wu-table'
import { isEmptyData } from '@/utils'
import WuDaterangePicker from './WuDaterangePicker.vue'
const props = defineProps<{
  formItemList: formItem[]
  // queryForm: any
}>()
const emits = defineEmits(['search', 'reset'])
const defaultStartKey = ref('startTime')
const defaultEndKey = ref('endTime')

const searchForm = reactive<{ [key: string]: any }>({})
onMounted(() => {
  props.formItemList?.forEach((item) => {
    if (item.type == 'daterange') {
      // 双日期
      const startKey = item.startProp || defaultStartKey.value
      const endKey = item.endProp || defaultEndKey.value
      searchForm[startKey] = Array.isArray(item.initValue)
        ? item.initValue[0]
        : ''
      searchForm[endKey] = Array.isArray(item.initValue)
        ? item.initValue[1]
        : ''
    } else {
      // 普通初始值
      searchForm[item.prop] = isEmptyData(item.initValue) ? '' : item.initValue
    }
  })
})

const onSearch = () => {
  emits('search', searchForm)
}
const searchFormRef = ref()
const daterangeRef = ref()
const onReset = () => {
  searchFormRef.value?.resetFields()
  if (daterangeRef.value) {
    // 若有双日期，清空
    daterangeRef.value?.forEach((item: any) => {
      item?.clearInput()
    })
  }
  nextTick(() => {
    console.log('searchForm nextTick', searchForm)
    emits('reset', searchForm)
  })
}
// 日期默认时刻
const defaultTime = new Date(2000, 1, 1, 23, 59, 59)

defineExpose({
  searchForm,
  onSearch
})
</script>

<style lang="scss" scoped></style>
